<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="6">
				<div class="grid-content bg-purple articleData">
					<em>10015</em>
					<i>篇</i>
					<p>总文章数</p>
				</div>
			</el-col>
			<el-col :span="6"
				><div class="grid-content bg-purple articleData color1">
					<em>123</em>
					<i>篇</i>
					<p>日新增文章数</p>
				</div></el-col
			>
			<el-col :span="6"
				><div class="grid-content bg-purple articleData color2" >
					<em>35</em>
					<i>条</i>
					<p>评论总数</p>
				</div></el-col
			>
			<el-col :span="6"
				><div class="grid-content bg-purple articleData color3">
					<em>123</em>
					<i>条</i>
					<p>日新增评论数</p>
				</div></el-col
			>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="16"
				><div class="grid-content bg-purple" ref="line" style="height:348px"></div
			></el-col>
			<el-col :span="8"
				><div class="grid-content bg-purple" ref="pie"  style="height:348px"></div
			></el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24"
				><div class="grid-content bg-purple" ref="bar" style="height:398px"></div
			></el-col>
		</el-row>
	</div>
</template>

<script>
const echarts = require('echarts');
export default {
 mounted(){
this.initLine()
this.initPie()
this.initBar()
 },
 methods:{
initLine(){
   const myChart = echarts.init(this.$refs.line);
  const option = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};
myChart.setOption(option);
window.addEventListener("resize", () => { myChart.resize();});
},
initPie(){
 const myChart = echarts.init(this.$refs.pie);
 const option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};
myChart.setOption(option);
window.addEventListener("resize", () => { myChart.resize();});
},
initBar(){
const myChart=echarts.init(this.$refs.bar)
const posList = [
  'left',
  'right',
  'top',
  'bottom',
  'inside',
  'insideTop',
  'insideLeft',
  'insideRight',
  'insideBottom',
  'insideTopLeft',
  'insideTopRight',
  'insideBottomLeft',
  'insideBottomRight'
];
app.configParameters = {
  rotate: {
    min: -90,
    max: 90
  },
  align: {
    options: {
      left: 'left',
      center: 'center',
      right: 'right'
    }
  },
  verticalAlign: {
    options: {
      top: 'top',
      middle: 'middle',
      bottom: 'bottom'
    }
  },
  position: {
    options: posList.reduce(function (map, pos) {
      map[pos] = pos;
      return map;
    }, {})
  },
  distance: {
    min: 0,
    max: 100
  }
};
app.config = {
  rotate: 90,
  align: 'left',
  verticalAlign: 'middle',
  position: 'insideBottom',
  distance: 15,
  onChange: function () {
    const labelOption = {
      rotate: app.config.rotate,
      align: app.config.align,
      verticalAlign: app.config.verticalAlign,
      position: app.config.position,
      distance: app.config.distance
    };
    myChart.setOption({
      series: [
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        },
        {
          label: labelOption
        }
      ]
    });
  }
};
const labelOption = {
  show: true,
  position: app.config.position,
  distance: app.config.distance,
  align: app.config.align,
  verticalAlign: app.config.verticalAlign,
  rotate: app.config.rotate,
  formatter: '{c}  {name|{a}}',
  fontSize: 16,
  rich: {
    name: {}
  }
};
const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['Forest', 'Steppe', 'Desert', 'Wetland']
  },
  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['2012', '2013', '2014', '2015', '2016']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Forest',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390]
    },
    {
      name: 'Steppe',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290]
    },
    {
      name: 'Desert',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190]
    },
    {
      name: 'Wetland',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      data: [98, 77, 101, 99, 40]
    }
  ]
};
myChart.setOption(option);
window.addEventListener("resize", () => { myChart.resize();});
}
 }
   
}
</script>

<style scoped>
.el-row {
	margin-bottom: 20px;
	/* &:last-child {
      margin-bottom: 0;
    } */
}
.el-row:last-child {
	margin-bottom: 0;
}
.el-col {
	border-radius: 4px;
}
.bg-purple-dark {
	background: #99a9bf;
}
.bg-purple {
	background: #fff;
}
.bg-purple-light {
	background: #e5e9f2;
}
.grid-content {
	border-radius: 4px;
	min-height: 36px;
  padding-top: 20px;
}
.row-bg {
	padding: 10px 0;
	background-color: #f9fafc;
}
.articleData{
	text-align: center;

}
.articleData em {
	font-style: normal;
	font-size: 50px;
	line-height: 50px;
	margin: 10px 0 0 20px;
	color: #83a2ed;
}
.articleData i {
	font-size: 14px;
	font-style: normal;

	color: #83a2ed;
	margin-left: 10px;
}
.articleData p {
	background-color: #e5e5e5;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.color1 em,.color1.i{
  color: #6ac6e2;
}
.color2 em,.color2.i{
  color: #5fd9de;
}
.color3 em,.color3.i{
  color: #58d88e;
}
</style>
